$mainColor = #f09495;
// 瑜伽馆主
$keeperColor = #f06774;
$blackColor = #161415;
$borderRadius = 0.3125rem;

@media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {
  html,body {
    font-size:46.08px;
  }
}
@media only screen and (max-width: 960px), only screen and (max-device-width:960px) {
  html,body {
    font-size:40.96px;
  }
}
@media only screen and (max-width: 800px), only screen and (max-device-width:800px) {
  html,body {
    font-size:34.13333333333333px;
  }
}
@media only screen and (max-width: 720px), only screen and (max-device-width:720px) {
  html,body {
    font-size:30.72px;
  }
}
@media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
  html,body {
    font-size:27.30666666666667px;
  }
}
@media only screen and (max-width: 600px), only screen and (max-device-width:600px) {
  html,body {
    font-size:25.6px;
  }
}
@media only screen and (max-width: 540px), only screen and (max-device-width:540px) {
  html,body {
    font-size:23.04px;
  }
}
@media only screen and (max-width: 480px), only screen and (max-device-width:480px) {
  html,body {
    font-size:20.48px;
  }
}
@media only screen and (max-width: 414px), only screen and (max-device-width:414px) {
  html,body {
    font-size:17.664px;
  }
}
@media only screen and (max-width: 400px), only screen and (max-device-width:400px) {
  html,body {
    font-size:17.066666666666666px;
  }
}
@media only screen and (max-width: 375px), only screen and (max-device-width:375px) {
  html,body {
    font-size:16px;
  }
}
@media only screen and (max-width: 360px), only screen and (max-device-width:360px) {
  html,body {
    font-size:15.36px;
  }
}
@media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
  html,body {
    font-size:13.653333333333334px;
  }
}
body,html
  line-height: 1
  // font-weight: 300
  font-family: 'PingFang SC','STHeitiSC-Light','Helvetica-Light',Arial,sans-serif
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  height: 100%

.clearfix
  display: inline-block
  &:after
    display: block
    content: "."
    height: 0
    line-height: 0
    clear: both
    visibility: hidden

@media(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.7)
      transform: scaleY(0.7)

@media(-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.5)
      transform: scaleY(0.5)

// 文字限制
.overflow-txt
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

.overflow-line
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

// 公用背景图片及页面结构
.club-content-bg
  background url('../../assets/bg-full.png') no-repeat
  background-size cover
  height 100%
  display flex

.club-content
  flex 1
  display flex
  margin 3%
  position relative
  flex-direction column

// 公用button
.receive-btn
  position absolute
  bottom 0
  width w = 100%
  height h = 2.8125rem
  line-height h
  left 50%
  margin-left -(w / 2)
  background $mainColor
  color #fff
  font-size 1.125rem
  text-align center

.clear-input
  background none
  outline none
  border 0

.clear-btn
  border none
  border-radius 0
  outline none

.clear-select
  appearance none
  border none
  background-color #fff

.clear-select::-ms-expand { 
  display none
}

.loading-pop
  position fixed
  z-index 100
  top 0
  left 0
  width 100%
  height 100%
  overflow auto
  background rgba(0,0,0,0.6)
  opacity 1
  .loading
    width w = 35px
    height h = 2.8125rem
    top 50%
    left 50%
    margin-left -(w/2)
    margin-top -(h/2)
    display flex
    flex-direction row
    justify-content space-around
    align-items center
    position absolute
    & > span
      display inline-block
      width 4px
      height 15px
      border-radius 4px
      background #fff
      -webkit-animation load 1s ease infinite
    @-webkit-keyframes load{ 
      0%,100%{ 
        height: 15px;
        // background: lightpink; 
      } 
      50%{ 
        height: 30px; 
        margin: -5px 0;
        // background: #fff;
        } 
    }
    & span:nth-child(2){
      -webkit-animation-delay:0.2s; 
    } 
    & span:nth-child(3){ 
      -webkit-animation-delay:0.4s; 
    } 
    & span:nth-child(4){ 
      -webkit-animation-delay:0.6s; 
    } 
    & span:nth-child(5){
      -webkit-animation-delay:0.8s; 
    }

// 瑜伽馆主渐变按钮
.gradient-btn{
  height 2.1875rem
  line-height: 2.1875rem
  background linear-gradient(to right, $keeperColor , #ff9174)
  border-radius 0.3125rem
  color #fff
  font-size 1rem
  text-align center
}
// 三等分count样式
.count-wrap{
  display flex
  justify-content space-between
  .count-item{
    flex 1
    text-align center
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    .count-num{
      font-size 1.3125rem
      color $keeperColor
    }
    .count-txt{
      padding-top 0.625rem
      font-size 0.75rem
      color $blackColor
    }
  }
}

.el-upload{
 width 100%
}
.el-upload-list--picture .el-upload-list__item{
  height 12.5rem
  padding 0
}
.el-upload-list--picture .el-upload-list__item-thumbnail{
  width 100%
  height 100%
  margin 0
  object-fit cover
}
.el-icon-document{
  display none
}
.el-upload-list__item.is-success .el-upload-list__item-status-label{
  position absolute
  z-index 99
}

.el-upload-list__item:hover .el-icon-close{
  z-index 99
}
.el-upload-list--picture .el-upload-list__item-name{
  margin-top: 25%
}

.pop-wrap
  position fixed
  z-index 1000
  top 0
  left 0
  width 100%
  height 100%
  overflow auto
  background rgba(0,0,0,0.5)
  opacity 1
  display flex
  justify-content center
  align-items center
  &.fade-enter-active, &.fade-leave-active
    transition all 0.5s ease
  &.fade-enter, &.fade-leave-active
    opacity 0
    background rgba(0,0,0,0)
  .pop-content
    width 76%
    height 19.0625rem
    background #fff
    border-radius $borderRadius
    display flex
    flex-direction column
    align-items center
    position relative
    .success-img
      margin-top 1.25rem
    .pop-title
      font-size 1.5rem
      margin 1.25rem 0
    .pop-num
      font-size 1.5rem
      color $keeperColor
    .vote-btn
      position absolute
      width 70%
      bottom 1.875rem

